<script setup>
import { ref, computed } from 'vue'
import { useCategoryStore } from '../../stores/categoryStore'
import { useTaskStore } from '../../stores/taskStore'
import { useRouter } from 'vue-router'

const categoryStore = useCategoryStore()
const taskStore = useTaskStore()
const router = useRouter()

// 获取排序后的分类
const categories = computed(() => categoryStore.sortedCategories)

// 获取每个分类的任务数量
const getCategoryTaskCount = (categoryId) => {
  return taskStore.getTasksByCategory(categoryId).length
}

// 展示添加/编辑分类对话框
const showDialog = ref(false)
const editingCategory = ref(null)

// 分类表单
const categoryForm = ref({
  name: '',
  color: '#9C27B0',
  icon: 'mdi-label-outline',
})

// 可选颜色
const colorOptions = [
  { color: '#F44336', name: '红色' },
  { color: '#E91E63', name: '粉红色' },
  { color: '#9C27B0', name: '紫色' },
  { color: '#673AB7', name: '深紫色' },
  { color: '#3F51B5', name: '靛蓝色' },
  { color: '#2196F3', name: '蓝色' },
  { color: '#03A9F4', name: '亮蓝色' },
  { color: '#00BCD4', name: '青色' },
  { color: '#009688', name: '蓝绿色' },
  { color: '#4CAF50', name: '绿色' },
  { color: '#8BC34A', name: '浅绿色' },
  { color: '#CDDC39', name: '酸橙色' },
  { color: '#FFEB3B', name: '黄色' },
  { color: '#FFC107', name: '琥珀色' },
  { color: '#FF9800', name: '橙色' },
  { color: '#FF5722', name: '深橙色' },
  { color: '#795548', name: '棕色' },
  { color: '#9E9E9E', name: '灰色' },
  { color: '#607D8B', name: '蓝灰色' }
]

// 可选图标
const iconOptions = [
  'mdi-label-outline',
  'mdi-home-outline',
  'mdi-briefcase-outline',
  'mdi-school-outline',
  'mdi-book-open-page-variant-outline',
  'mdi-food-apple-outline',
  'mdi-shopping-outline',
  'mdi-heart-outline',
  'mdi-star-outline',
  'mdi-account-outline',
  'mdi-soccer',
  'mdi-airplane',
  'mdi-palette',
  'mdi-bank',
  'mdi-movie',
  'mdi-music',
  'mdi-gamepad-variant-outline'
]

// 显示添加分类表单
const showAddCategoryForm = () => {
  editingCategory.value = null
  categoryForm.value = {
    name: '',
    color: '#9C27B0',
    icon: 'mdi-label-outline',
  }
  showDialog.value = true
}

// 显示编辑分类表单
const showEditCategoryForm = (category) => {
  editingCategory.value = category
  categoryForm.value = {
    name: category.name,
    color: category.color,
    icon: category.icon,
  }
  showDialog.value = true
}

// 保存分类
const saveCategory = () => {
  if (!categoryForm.value.name.trim()) return
  
  if (editingCategory.value) {
    // 更新分类
    categoryStore.updateCategory(editingCategory.value.id, {
      name: categoryForm.value.name.trim(),
      color: categoryForm.value.color,
      icon: categoryForm.value.icon,
    })
  } else {
    // 添加新分类
    categoryStore.addCategory({
      name: categoryForm.value.name.trim(),
      color: categoryForm.value.color,
      icon: categoryForm.value.icon,
    })
  }
  
  showDialog.value = false
}

// 删除分类
const deleteCategory = (category) => {
  if (confirm(`确定要删除"${category.name}"分类吗？该分类下的任务将不会被删除。`)) {
    categoryStore.deleteCategory(category.id)
    
    // 如果当前在该分类页面，则导航回首页
    if (router.currentRoute.value.params.id === category.id) {
      router.push('/today')
    }
  }
}

// 路由到分类
const navigateToCategory = (categoryId) => {
  router.push(`/category/${categoryId}`)
}
</script>

<template>
  <div class="category-list">
    <v-list>
      <!-- 内置分类 -->
      <v-list-item
        prepend-icon="mdi-calendar-today"
        title="今日任务"
        @click="router.push('/today')"
        rounded="lg"
        class="mb-1"
      ></v-list-item>
      
      <v-list-item
        prepend-icon="mdi-calendar-month"
        title="全部任务"
        @click="router.push('/all')"
        rounded="lg"
        class="mb-1"
      ></v-list-item>
      
      <v-divider class="my-2"></v-divider>
      
      <!-- 用户自定义分类 -->
      <div class="d-flex justify-space-between align-center px-4 my-2">
        <div class="text-subtitle-2">分类</div>
        <v-btn icon size="small" @click="showAddCategoryForm">
          <v-icon>mdi-plus</v-icon>
        </v-btn>
      </div>
      
      <v-list-item
        v-for="category in categories"
        :key="category.id"
        :value="category.id"
        rounded="lg"
        class="mb-1"
        @click="navigateToCategory(category.id)"
      >
        <template v-slot:prepend>
          <v-icon :color="category.color">{{ category.icon }}</v-icon>
        </template>
        
        <v-list-item-title>{{ category.name }}</v-list-item-title>
        
        <template v-slot:append>
          <v-chip
            size="x-small"
            class="ml-2"
            :color="category.color"
            text-color="white"
          >
            {{ getCategoryTaskCount(category.id) }}
          </v-chip>
          
          <v-menu location="bottom">
            <template v-slot:activator="{ props }">
              <v-btn
                icon
                variant="text"
                size="small"
                v-bind="props"
                @click.stop
              >
                <v-icon>mdi-dots-vertical</v-icon>
              </v-btn>
            </template>
            <v-list density="compact">
              <v-list-item @click.stop="showEditCategoryForm(category)">
                <template v-slot:prepend>
                  <v-icon size="small">mdi-pencil</v-icon>
                </template>
                <v-list-item-title>编辑</v-list-item-title>
              </v-list-item>
              
              <v-list-item @click.stop="deleteCategory(category)">
                <template v-slot:prepend>
                  <v-icon size="small">mdi-delete</v-icon>
                </template>
                <v-list-item-title>删除</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </template>
      </v-list-item>
    </v-list>
    
    <!-- 分类编辑对话框 -->
    <v-dialog v-model="showDialog" max-width="500px">
      <v-card>
        <v-card-title>
          {{ editingCategory ? '编辑分类' : '添加分类' }}
        </v-card-title>
        
        <v-card-text>
          <v-form @submit.prevent="saveCategory">
            <!-- 分类名称 -->
            <v-text-field
              v-model="categoryForm.name"
              label="分类名称"
              required
              :rules="[v => !!v || '请输入分类名称']"
              class="mb-2"
            ></v-text-field>
            
            <!-- 颜色选择 -->
            <div class="text-subtitle-2 mb-2">颜色</div>
            <v-chip-group
              v-model="categoryForm.color"
              selected-class="elevation-4"
              class="mb-3"
            >
              <v-chip
                v-for="option in colorOptions"
                :key="option.color"
                :value="option.color"
                :color="option.color"
                filter
                variant="elevated"
                size="small"
              ></v-chip>
            </v-chip-group>
            
            <!-- 图标选择 -->
            <div class="text-subtitle-2 mb-2">图标</div>
            <v-radio-group
              v-model="categoryForm.icon"
              row
              class="icon-selection"
            >
              <v-radio
                v-for="icon in iconOptions"
                :key="icon"
                :value="icon"
                hide-details
                class="icon-radio"
              >
                <template v-slot:label>
                  <v-icon :color="categoryForm.color">{{ icon }}</v-icon>
                </template>
              </v-radio>
            </v-radio-group>
          </v-form>
        </v-card-text>
        
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn variant="text" @click="showDialog = false">取消</v-btn>
          <v-btn
            color="primary"
            @click="saveCategory"
            :disabled="!categoryForm.name.trim()"
          >
            保存
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<style scoped>
.category-list {
  width: 100%;
}

.icon-selection {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.icon-radio {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}
</style> 